<template>
	<div class="app-container" v-loading="loading" @contextmenu.prevent="" >
		<div class="search-container  app_ny">
			<div class="div2" style="position: relative">
				<el-row :gutter="12" style="width: 100%">
					<el-col :span="3">
						<el-input v-model="queryParams.doc_no" placeholder="请输入公文编号" clearable
							@keyup.enter="handleQuery" />
					</el-col>
					<el-col :span="3">
						<el-input v-model="queryParams.title" placeholder="请输入公文标题" clearable
							@keyup.enter="handleQuery" />
					</el-col>
					<el-col :span="6" >
						<el-button  :loading="loading"  type="primary" @click="handleQuery"><template
							#icon><i-ep-search /></template>查询</el-button>
					</el-col>
				</el-row>
				<FilterColumn
				 class="filtBox"
				 @handleRefresh="resetQuery()"
				:strtype="strtype"></FilterColumn>
			</div>	
		</div>
		<el-card shadow="never">
			<div class="action-row">
				<el-button  @click="handleDo('', 'act_info')" :disabled="multipleSelection.length !== 1" :type="buttonType(multipleSelection.length)" plain><template #icon><i-ep-document/></template>详情</el-button>
			</div>
			<el-table :key="reload" 
				ref="dataTableRef" 
				v-loading="loading" 
				:data="tableData" 
				border
				align="left"
				tooltip-effect="dark" 
				:show-overflow-tooltip="true"
				:scrollbar-always-on="true" 
				@cell-mouse-enter="rowMouse"
				@cell-mouse-leave="menuLineVisible=false"
				@selection-change="handleSelectionChange">
				<el-table-column type="selection" align="center" width="55" />
				<el-table-column type="index" label="序号" align="center" width="80" />
				<template v-for="(item,index) in cColumnsList()" :key='index'>
					<el-table-column 
						:label="item.label" 
						:align="item.align" 
						:prop="item.prop" 
						:width="item.width"
						:min-width="item.minwidth">
						<template #default="scope" v-if="item.prop == 'level'">
							<el-tag v-if="scope.row.level == 1" type="primary">秘密</el-tag>
							<el-tag v-if="scope.row.level == 2" type="warning">机密</el-tag>
							<el-tag v-if="scope.row.level == 3" type="danger">绝密</el-tag>
							<el-tag v-if="scope.row.level == 0" type="info">未设置</el-tag>
						</template>
						<template #default="scope" v-if="item.prop == 'title'">
							<span>{{ scope.row.title }}</span>
							<div v-show="rowR.id === scope.row.id && menuLineVisible">
								<ul class="menuLine">
									<li class="menuLine__item">
										<el-button type="primary" class="menuBtn" title="详情" size="small" plain @click="handleDo(scope.row, 'act_info')"><template #icon><i-ep-document/></template></el-button>
									</li>
								</ul>
							</div>
						</template>
					</el-table-column>
				</template>
				
			</el-table>
			<pagination v-if="total > 0" v-model:total="total" v-model:page="queryParams.page"
				v-model:limit="queryParams.limit" @pagination="handleQuery" />
		</el-card>


	</div>


</template>
<script setup lang="ts">
	defineOptions({
		name: "Doc",
		inheritAttrs: false,
	});
	import { useRoute } from 'vue-router';
	import router from '@/router';
	import { useTableFilterStore } from "@/store/modules/tableFilter";
	//接口地址
	import {
		getDocLst
	} from "@/api/doc";
	const TableFilter = useTableFilterStore();
	const strtype = ref('docList')

	// 表格标题
	const cTitles = ["公文标题", "公文编号", "机密程度",'发布时间'];
	// 显示字段
	const sTitles = ["公文标题", "公文编号", "机密程度",'发布时间'];
	// 字段属性	
	const cColumns =[
		{ label: "公文标题",prop:"title",align:"center",minwidth:200 },
		{ label: "公文编号", prop:"doc_no",align:"center",minwidth:200 },
		{ label: "机密程度",prop:"level",align:"center",width:150 },
		{ label: "发布时间",prop:"add_time_text",align:"center",width:200 },
	]			
	interface TableGlobalLocal {
	  [key: string]: any; // 或者更具体的类型
	}
	// 列表渲染
	function cColumnsList(){
		const ColumnsList = (TableFilter.tableGlobalLocal as TableGlobalLocal)[strtype.value + '_checklist'];
		if(ColumnsList)
		{
			const columnMap:any = {}; // 创建一个对象来存储cColumns中label和对象的映射  
			// 预先建立label到对象的映射  
			for (const column of cColumns) {  
				columnMap[column.label] = column;  
			}  
			const newList = [];  
			for (const label of ColumnsList) {  
				// 尝试从映射中获取对象  
				const foundColumn = columnMap[label];  
				if (foundColumn) {  
					// 如果找到了，则添加到newList中  
					newList.push(foundColumn);  
				}  
			}  
			return newList;  
		}
		else
		{
			return [];
		}
	};
	// 列表-数据列初始化
	function columnsInit() {
	  const dropColStr:string =strtype.value + '_dropCol';
	  const checklistStr:string = strtype.value + '_checklist';
	  const drop_col:any = (TableFilter.tableGlobalLocalTemp as TableGlobalLocal)[dropColStr];
	  const checklist = (TableFilter.tableGlobalLocalTemp as TableGlobalLocal)[checklistStr]; 
	  if(!drop_col)
	  {
		  (TableFilter.tableGlobalLocal as TableGlobalLocal)[dropColStr]=JSON.parse(JSON.stringify(cTitles));
		  (TableFilter.tableGlobalLocalTemp as TableGlobalLocal)[dropColStr]=JSON.parse(JSON.stringify(cTitles));
	  }
	  if(!checklist)
	  {
		  (TableFilter.tableGlobalLocal as TableGlobalLocal)[checklistStr]=JSON.parse(JSON.stringify(sTitles)) ;
		  (TableFilter.tableGlobalLocalTemp as TableGlobalLocal)[checklistStr]=JSON.parse(JSON.stringify(sTitles));
	  }
	}
		
	
	const queryParamsData={
		page: 1,//分页
		limit: 20,//分页条数
		doc_no: "",//公文编号
		title: ""//公文标题
	}
	//搜索-字段配置
	const queryParams = reactive(JSON.parse(JSON.stringify(queryParamsData)));
	const loading = ref(false);
	const total = ref(0);
	const reload = ref();
	const tableData = ref([])
	const multipleSelection =ref<any>([]);
	const menuLineVisible =ref(true);
	const rowR = ref<any>({});


	// 行菜单事件
	function rowMouse(row:any) {
		menuLineVisible.value = true
		rowR.value = row
	}
	// 数据多选事件
	function handleSelectionChange(val:any) {
		multipleSelection.value = val
	}
	
	// 操作按钮样式
	function buttonType(val:number) {
		if (val === 1) {
			return 'primary'
		} else {
			return 'info'
		}
	}
	// 操作
	 function handleDo(row:any, act:string) {
		switch (act) {
			case 'act_info':
				let rowItem= JSON.parse(JSON.stringify(row || multipleSelection.value[0]))
				openDialog(rowItem.id)
				break
			default:	
		}
	}
	/**
	* 搜索表单-确认 获取列表文件
	*/
	function handleQuery() {
		loading.value = true;
		getDocLst(queryParams).then((res : any) => {
			tableData.value = res.data.list
			total.value = res.data.count
		}).finally(() => {
			loading.value = false
		})
	}
	/**
	 * 点击-表格-查看详情
	 *  @param roleId
	 */
	function openDialog(Id ?: number) {
		// dialog.visible = true;
		router.push({
			path: '/doc/detail',
			query: { id: Id }
		});

	}
	
	// 搜索表单-刷新
	function resetQuery() {
		handleQuery();
	}
	onMounted(() => {
		handleQuery();
		columnsInit();
	})
</script>
<style lang="scss" scoped>


</style>